<div class="login-wrapper" id="login-content" *ngIf="!userStatus.isLogin">
  <div class="login-content">
    <a href="#" class="close">x</a>
    <h3>登录</h3>
    <div class="row">
      <label>
        用户名:
        <input type="text" [(ngModel)]="username" placeholder="请输入用户名" style="text-transform: lowercase"/>
      </label>
    </div>

    <div class="row">
      <label>
        密码:
        <input type="password" [(ngModel)]="password"/>
      </label>
    </div>
    <div class="row">
      <div class="remember">
        <div>
          <input type="checkbox" name="remember-me" checked value="true"><span>记住登录</span>
        </div>
        <a (click)="forgetPwd()">忘记密码 ?</a>
      </div>
    </div>
    <div class="row">
      <button type="button" (click)="login()" id="login_submit">登录</button>
    </div>
  </div>
</div>
<div class="login-wrapper" id="signup-content">
  <div class="login-content">
    <h3>注册用户</h3>
    <div class="row">
      <label for="account">
        用户名:
        <input type="text" name="account" id="account" placeholder="请输入用户名"
               required="required" style="text-transform: lowercase" minlength="4" value="rose"
               [(ngModel)]="regUser.username"/>
      </label>
    </div>

    <div class="row">
      <label for="email">
        邮箱:
        <input type="email" name="email" id="email" placeholder="请输入邮箱" value="cearnach@foxmail.com"
               pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
               required="required" style="text-transform: lowercase" [(ngModel)]="regUser.email" />
      </label>
    </div>
    <div class="row">
      <label for="reg-password">
        密码:
        <input type="password" id="reg-password" placeholder="" value="rose"
               minlength="4"
               required="required" [(ngModel)]="regUser.password"/>
      </label>
    </div>
    <div class="row">
      <label for="reg-re-password">
        再次输入密码:
        <input type="password" id="reg-re-password" placeholder="" value="rose"
               minlength="4"
               required="required" [(ngModel)]="recheckPwd"/>
      </label>
    </div>
    <div class="row">
      <button type="button" (click)="register()">注册用户</button>
    </div>
  </div>
</div>

<header class="ht-header">
  <div class="container">
    <nav class="navbar navbar-default navbar-custom">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header logo">
        <div class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <div id="nav-icon1">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <a href="/"><img class="logo" src="/assets/images/logo1.png" alt="" width="119" height="58"></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse flex-parent" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav flex-child-menu menu-left">
          <li class="hidden">
            <a href="#page-top"></a>
          </li>
          <li class="dropdown first">
            <a href="/">
              首页
            </a>
          </li>
          <li class="dropdown first">
            <a [routerLink]="['/movie/list']">
              电影列表
            </a>
          </li>
          <li class="dropdown first">
            <a [routerLink]="['/actor/list']">
              演员列表
            </a>

          </li>
          <li class="dropdown first">
            <a [routerLink]="['/news/list']">
              影视新闻
            </a>

          </li>
         <!-- <li class="dropdown first">
            <a class="btn btn-default dropdown-toggle lv1" data-toggle="dropdown" data-hover="dropdown">
              社区 <i class="fa fa-angle-down" aria-hidden="true"></i>
            </a>
            <ul class="dropdown-menu level1">
              <li><a href="userfavoritegrid.html">user favorite grid</a></li>
              <li><a href="userfavoritelist.html">user favorite list</a></li>
              <li><a href="userprofile.html">user profile</a></li>
              <li class="it-last"><a href="userrate.html">user rate</a></li>
            </ul>
          </li>-->
        </ul>
        <ul class="nav navbar-nav flex-child-menu menu-right">
         <!-- <li class="dropdown first">
            <a class="btn btn-default dropdown-toggle lv1" data-toggle="dropdown" data-hover="dropdown">
              页面 <i class="fa fa-angle-down" aria-hidden="true"></i>
            </a>
            <ul class="dropdown-menu level1">
              <li><a href="landing.html">Landing</a></li>
              <li><a href="404.html">404 Page</a></li>
              <li class="it-last"><a href="comingsoon.html">Coming soon</a></li>
            </ul>
          </li>
          <li><a>帮助</a></li>-->
          <li class="loginLink" *ngIf="!userStatus.isLogin">
            <a>登录</a>
          </li>
          <li class="btn signupLink" *ngIf="!userStatus.isLogin">
            <a>注册</a>
          </li>

          <li>
            <a (click)="routeToUserHome()" style="color: #cf590c;"
               *ngIf="userStatus.isLogin">{{userDetails['nickname']}}</a>
          </li>
          <li>
            <a *ngIf="userStatus.isLogin" style="color: yellow" (click)="logout()">退出登录</a>
          </li>

        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </nav>
    <!-- top search form -->
    <div class="top-search">
      <select id="select-movie-search">
        <option value="name">名称</option>
      </select>
      <input type="text" placeholder="请输入要查找的电影名称或者类型" [(ngModel)]="queryStr" (keyup)="onKeyUp($event)"
             id="movie-search">
    </div>
  </div>
</header>
